<template>
    <div style="margin-bottom: 10px; width: 100%; display: flex; justify-content: center;align-items: center" :style="{height: max_Height + 'px'}">
        <div v-if="is_task">
            <dv-scroll-board :config="config" style="width:700px;height:520px" />
        </div>
        <div v-else>没有数据</div>
    </div>
</template>


<script>
import {getCurrentTime2, heightConfig3} from "@/utils/loadPage";
import {addTask, getQueueData} from "@/utils/taskQueue";

export default {
    name: 'MyPQueue',
    data() {
        return {
            max_Height: heightConfig3(),
            config:{},
            form: {
                dataList: []
            },
            is_task: true, // 队列中是否有任务
        }
    },
    mounted() {
        this.handleResize();
        // 组件挂载时监听窗口大小变化事件，并设置定时器定时获取支付信息
        window.addEventListener('resize', this.handleResize);
        this.timer = setInterval(this.handleResize, 1000)
        this.create_data(30)
    },
    beforeDestroy() {
        // 组件销毁前移除窗口大小变化事件监听，销毁 ECharts 实例，并清除定时器和 sessionStorage
        window.removeEventListener('resize', this.handleResize);
        clearInterval(this.timer)
        sessionStorage.clear()
    },

    methods: {
        handleResize() {
            // 处理窗口大小变化事件，重新获取支付信息
            // console.log('Window resized');
            this.max_Height = heightConfig3();
            this.get_data()
        },

        get_data() {
            // 获取数据
            const currentTasks = getQueueData();
            if (currentTasks.length > 0) {
                console.log(getCurrentTime2(true), ' ==> 当前队列中的任务:', currentTasks);
            } else if (this.is_task) {
                this.is_task = false;
                console.log(getCurrentTime2(true), ' ==> 当前队列中没有任务')
            }
            let dataList = []
            currentTasks.forEach(item => {
                dataList.push([item.id,item.name, item.create_time,item.value])
            })
            this.config = {
                header: ['id', '名称', '创建时间',"数值"],
                data: dataList,
                index: true,
                rowNum:13,
                columnWidth: [80,110,120,240,120],
                align: ['center']
            }
        },

        create_data(num) {
            // 创建数据
            for (let i = 1; i <= num; i++) {
                let item = {
                    id: i,
                    name: 'data' + i,
                    create_time: getCurrentTime2(true),
                    value: Math.floor(Math.random() * 100)
                }
                this.is_task = true;
                addTask(item, i * 3000)
            }
        }
    }

}


</script>
